/* ====================
来源：guangtou.me
作者：光头obsidian教程
功能：表格美化
==================== */

/* ====== 阅读视图容器处理 ====== */
.markdown-reading-view .markdown-preview-sizer {
  /* Obsidian阅读视图特有的包装元素 */
  transform: none !important; 
  /* 清除Obsidian默认应用的变换属性，防止干扰粘性定位 */
}

/* ====== 强制创建新层叠上下文 ====== */
.markdown-preview-view table,                 /* 实时预览模式下的表格元素 */
.markdown-source-view.mod-cm6 .cm-table-widget, /* 源码模式下的表格容器组件 */
.markdown-reading-view table {                /* 阅读视图下的表格元素 */  
  transform: translateZ(0);
  /* 通过3D变换触发GPU加速，创建独立渲染层 */
  isolation: isolate;
  /* 隔离元素的层叠上下文，防止z-index冲突 */
  contain: style layout paint;
  /* 现代CSS优化属性：限制浏览器重绘范围，提升滚动性能 */
}

/* ====== 表头行基础样式 ====== */
.markdown-preview-view thead tr,             /* 实时预览表头行 */
.markdown-source-view.mod-cm6 thead tr,      /* 源码模式表头行 */
.markdown-reading-view thead tr {            /* 阅读视图表头行 */
  background-color: rgba(52, 152, 219, 0.05) !important;
  /* 设置基础半透明蓝色背景（RGBA透明度5%） */
}

/* ====== 蓝色毛玻璃表头核心样式 ====== */
.markdown-preview-view thead tr th,          /* 实时预览表头单元格 */
.markdown-source-view.mod-cm6 .cm-table-widget thead tr th, /* 源码模式表头单元格 */
.markdown-reading-view thead tr th {         /* 阅读视图表头单元格 */
  position: sticky !important;   
  /* 使用粘性定位实现冻结效果 */
  top: 0 !important;             
  /* 固定到容器顶部 */
  z-index: 500 !important;       
  /* 设置足够高的层级，确保覆盖下方内容 */
  
  background: rgba(33, 150, 243, 0.15) !important; 
  /* 叠加更高浓度的蓝色层（透明度15%）*/
  
  box-shadow: 0 1px 3px rgba(3, 102, 214, 0.09) !important; 
  /* 添加浅蓝色投影增加层次感 */
  
  backdrop-filter:               /* 现代CSS滤镜组合 */
    blur(8px)                    /* 高斯模糊创造毛玻璃效果 */
    brightness(1.18)             /* 亮度补偿（避免模糊导致变暗） */
    hue-rotate(195deg);          /* 色相旋转增强蓝色调 */
}

/* ====== 阅读视图滚动容器修复 ====== */
.markdown-reading-view .markdown-preview-section {
  overflow: visible !important; 
  /* 解除外层容器的滚动限制（Obsidian默认设置为auto） */
}

.markdown-reading-view .markdown-preview-section > div {
  overflow: visible !important; 
  /* 解除内层div的滚动限制，确保表格能正常溢出 */
}

/* ====== 源码模式容器修复 ====== */
.markdown-source-view.mod-cm6 .cm-table-widget {
  overflow: visible !important;
  /* 允许源码模式下的表格溢出容器 */
}

/* =============== 当前单元格高亮 =============== */
.markdown-preview-view td:hover,            /* 实时预览单元格悬停 */
.markdown-source-view.mod-cm6 td:hover,     /* 源码模式单元格悬停 */
.markdown-reading-view td:hover {           /* 阅读视图单元格悬停 */
  outline: 2px solid rgba(255, 165, 0, 0.7) !important;
  /* 使用outline替代border（不影响布局） */
  position: relative;
  /* 创建新的定位上下文 */
  z-index: 501; 
  /* 设置高于表头的层级（500+1） */
}


/* ===== 表格十字定位 ===== */
/* =============== 表格容器基础设置 =============== */
.markdown-preview-view table,
.markdown-source-view.mod-cm6 table {
  overflow: visible !important; /* 允许内容溢出，确保列高亮效果可见 */
  position: relative;          /* 为子元素的绝对定位创建参照基准 */
}

/* =============== 单元格基础样式 =============== */
.markdown-preview-view td,
.markdown-source-view.mod-cm6 td {
  position: relative;          /* 为伪元素定位建立坐标系 */
  overflow: visible !important;/* 允许伪元素溢出单元格 */
  transition: background-color 0.2s; /* 背景色过渡动画 */
}

/* =============== 行高亮效果 =============== */
.markdown-preview-view tr:hover td,
.markdown-source-view.mod-cm6 tr:hover td {
  background: rgba(52, 152, 219,0.08) !important; 
  /* 使用!important覆盖斑马纹优先级，透明度8%的蓝色背景 */
  border-top: 2px solid rgba(52, 152, 219, 0.8);    /* 上部淡色边框 */
  border-bottom: 2px solid rgba(52, 152, 219, 0.8); /* 底部淡色边框 */

}

/* =============== 列高亮效果 =============== */
.markdown-preview-view td:hover::after,
.markdown-source-view.mod-cm6 td:hover::after {
  content: '';                 /* 必须属性，创建伪元素 */
  position: absolute;          /* 绝对定位脱离文档流 */
  top: -9999px;                /* 向上延伸至无限远 */
  bottom: -9999px;             /* 向下延伸至无限远 */
  left: 0;                     /* 从单元格左侧开始 */
  right: 0;                    /* 覆盖整个单元格宽度 */
  background: rgba(52, 152, 219, 0); /* 列背景色 */
  z-index: -1;                 /* 置于单元格内容下方 */
  pointer-events: none;        /* 防止伪元素阻挡鼠标事件 */
  border-left: 2px solid rgba(191, 97, 106, 0.8);  /* 左侧淡色边框 */
  border-right: 2px solid rgba(191, 97, 106, 0.8); /* 右侧淡色边框 */
}



